<!--
 * @Description: Description
 * @Author: zhaojiansen
 * @Date: 2022-09-15 13:53:17
 * @LastEditors: zhaojiansen
 * @LastEditTime: 2022-11-02 17:39:57
-->
<template>
  <div class="systemAdministrationtools">
    <div class="HeddText">
      员工管理
    </div>
    <div class="systemAdministrationtoolsBox">
      <div class="TreePanel">
        <div class="refresh">
          <el-button icon="el-icon-refresh" style="color:red;" type="text">刷新</el-button>
        </div>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div class="content">
        <div class="searchcharm">
          <div class="searchcharmInput">
            <el-input
              v-model="input1"
              placeholder="请搜素员工名称"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
          <div class="searchcharmButton">
            <div class="buttonText">
              同步成员需要较长时间，请耐心等待
            </div>
            <div class="button">
              <el-button type="primary">同步数据</el-button>
            </div>
          </div>

        </div>
        <div class="searchcharmTable">
          <!-- :header-cell-style="tableHeaderColor" -->
          <el-table
            :cell-style="rowStyle"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              label="序号"
              prop="date"
              width="180"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="姓名"
              prop="name"
              width="180"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="手机"
              prop="phone"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="邮箱"
              prop="mailbox"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="企业微信ID"
              prop="wechatId"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="状态"
              prop="state"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="searchcharmPagination">
          <el-pagination
            :page-size="20"
            :total="1000"
            background
            layout="total,prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      data: [{
        label: '国联人寿股份有限公司',
        children: [{
          label: '国联人寿无锡分公司公司',
          children: [{
            label: '国联人寿无锡分公司公司'
          }]
        }, {
          label: '国联人寿将银分公司',
          children: [{
            label: '国联人寿无锡分公司公司'
          }]
        }]
      }],
      tableData: [{
        date: '1',
        name: '王小虎',
        phone: '18735610599',
        mailbox: 'zhaojiansen@123.com',
        wechatId: '18755626548896',
        state: '在职'
      }, {
        date: '2',
        name: '王小虎',
        phone: '18735610599',
        mailbox: 'zhaojiansen@123.com',
        wechatId: '18755626548896',
        state: '在职'
      }, {
        date: '3',
        name: '王小虎',
        phone: '18735610599',
        mailbox: 'zhaojiansen@123.com',
        wechatId: '18755626548896',
        state: '在职'
      }, {
        date: '4',
        name: '王小虎',
        phone: '18735610599',
        mailbox: 'zhaojiansen@123.com',
        wechatId: '18755626548896',
        state: '在职'
      }],

      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }

  },
  methods: {
    rowStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '姓名') {
        return 'color:blue'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      console.log(val)
    },
    handleNodeClick(data) {
      console.log(data)
      console.log(data.$treeNodeId)
      console.log(data.label)
    }
  }
}
</script>

<style lang="scss" scoped>
.systemAdministrationtools {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgb(233, 233, 233);

  .HeddText {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .systemAdministrationtoolsBox {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgb(233, 233, 233);

    justify-content: space-between;

    .TreePanel {
      width: 300px;
      background-color: white;
      padding: 10px;

      .refresh {
        text-align: right;
      }
    }

    .content {
      flex: 1;
      background-color: white;
      margin-left: 10px;
      padding: 10px;

      .searchcharm {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;

        .searchcharmButton {
          display: flex;
          align-items: center;

          .buttonText {
            font-size: 12px;
            color: gray;
          }

          .button {
            margin-left: 10px;
          }
        }
      }

      .searchcharmPagination {
        display: flex;
        align-items: center;
        justify-content: end;
        text-align: right;
        margin-top: 50px;
      }
    }
  }
}

</style>
